<template>
  <div id="adminUserBar">
    <div id="adminContent">
      <p id="adminTitle">管理员专用功能</p>
      <el-button id="adminInsertBtn" type="success" @click="drawer = true">添加用户</el-button>
      <el-table
          :data="adminUserData.slice((currpage-1)*pagesize,currpage*pagesize)"
          border
          stripe
          style="width: 90%">
        <el-table-column
            prop="username"
            label="姓名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            width="100">
        </el-table-column>
        <el-table-column
            prop="age"
            width="100"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="status"
            width="120"
            label="身份">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="200"
            label="号码">
        </el-table-column>
        <el-table-column
            prop="email"
            width="250"
            label="邮箱">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="adminEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="adminDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currpage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next, jumper"
          :total="adminUserData.length">
      </el-pagination>
      <el-drawer
        title="添加用户信息"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <admin-insert-bar></admin-insert-bar>
      </el-drawer>
      <el-dialog title="修改权限" :visible.sync="dialogFormVisible">
        <el-form
            :model="updateStatusForm"
            ref="updateStatusForm"
            :rules="updateStatusRule">
          <el-form-item label="选择权限" :label-width="formLabelWidth">
            <el-select v-model="updateStatusForm.status" placeholder="请选择修改的权限">
              <el-option label="管理员" value="0"></el-option>
              <el-option label="注册用户" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserStatus('updateStatusForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  import axios from "@/network/axios";
  import {adminDeleteUser} from "@/network/admin/adminDeleteUser";
  import AdminInsertBar from "@/components/content/profile/adminUse/adminInsertBar";
  import {adminUpdateUser} from "@/network/admin/adminUpdateUser";

  export default {
    name: "AdminUserBar",
    components: {AdminInsertBar},
    data() {
      return {
        adminUserData:[],
        pagesize: 6,  // 每页的数据数
        currpage: 1,  // 默认开始页面
        drawer: false,
        direction: 'rtl',
        dialogFormVisible: false,
        updateStatusForm: {
          status: '',
        },
        updateStatusRule: {
          status: [
            { required: true, message: '请选择身份', trigger: 'change' },
          ],
        },
        formLabelWidth: '120px',
        updateUid: '',
      }
    },
    methods: {
      adminSelectAll() {
        axios({
          url: '/selectAll/'
        }).then(res => {
          // eslint-disable-next-line no-console
          console.log(res);
          let userData = res;
          let data = [];
          let len = userData.length;
          for (let i = 0; i < len; i++) {
            let obj = {};
            obj.uid = userData[i].uid;
            obj.username = userData[i].username;
            obj.gender = userData[i].gender;
            obj.age = userData[i].age;
            obj.phone = userData[i].phone;
            obj.email = userData[i].email;
            obj.status = userData[i].status;
            if(obj.gender === '0') {
              obj.gender = '男';
            } else {
              obj.gender = '女';
            }
            if(obj.status === '0') {
              obj.status = '管理员';
            } else {
              obj.status = '注册用户';
            }
            data[i] = obj;
          }
          this.adminUserData = data;
        }).catch(err => {
          // eslint-disable-next-line no-console
          console.log(err);
        })
      },
      adminEdit(index, row) {
        // eslint-disable-next-line no-console
        console.log(index, row);
        this.dialogFormVisible = true;
        this.updateUid = row.uid;
      },
      adminDelete(index, row) {
        // eslint-disable-next-line no-console
        console.log(index, row);
        // eslint-disable-next-line no-console
        console.log(row.uid);
        adminDeleteUser(row.uid).then(res => {
          if (res.code === '1') {
            alert("删除成功");
            this.$router.go(0);
          } else {
            alert("删除失败");
          }
        }).catch(err => {
          // eslint-disable-next-line no-console
          console.log("错误", err);
        })
      },
      handleSizeChange(val) {
        // eslint-disable-next-line no-console
        console.log(`每页 ${val} 条`);
        this.pagesize=val;
      },
      handleCurrentChange(val) {
        // eslint-disable-next-line no-console
        console.log(`当前页: ${val}`);
        this.currpage=val;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
            // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
            // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
      },
      updateUserStatus(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // eslint-disable-next-line no-console
            console.log(this.updateUid, this.updateStatusForm.status);
            adminUpdateUser(this.updateUid, this.updateStatusForm.status).then(res => {
              if (res.code === '1') {
                alert("修改成功");
                this.$router.go(0);
              }else {
                alert("修改失败");
              }
            }).catch(err => {
              // eslint-disable-next-line no-console
              console.log(err);
            })
          }
        })
      },
    },
    mounted() {
      this.adminSelectAll();
    },
  }
</script>

<style scoped>
  #adminUserBar {
    position: absolute;
    top: 195%;
    width: 100%;
    height: 90%;
    /*border: 1px solid;*/
  }
  #adminContent {
    position: absolute;
    width: 90%;
    height: 95%;
    left: 5%;
    top: 2%;
    background-color: white;
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
  }
  #adminTitle {
    position: absolute;
    top: 5%;
    left: 2%;
    font: 18px sans-serif;
    color: #74982A;
  }
  #adminInsertBtn {
    position: absolute;
    top: 5%;
    right: 5%;
  }
  .el-table {
    position: absolute;
    top: 15%;
    height: 70%;
    left: 5%;
  }
  .el-pagination {
    position: absolute;
    bottom: 5%;
    right: 5%;
  }
</style>